<template>
    <div id="container">
        <div id="title">
            管理员信息维护
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <el-form :model="reset_info" :rules="rules" ref="reset_info">
            <el-form-item label="原密码" prop="old_password">
                <el-input v-model="reset_info.old_password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new_password">
                <el-input v-model="reset_info.new_password"></el-input>
            </el-form-item>
            <el-form-item label="重复新密码" prop="repeat_new_password">
                <el-input v-model="reset_info.repeat_new_password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset_password('reset_info')">重置密码</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'Admin',
    data(){
        return{
            // 重置密码表单
            reset_info:{
                'old_password':'',
                'new_password':'',
                'repeat_new_password':''
            },
            // 重置密码表单验证
            rules:{
                old_password: [
                    { required: true, message: '请输入您的旧密码', trigger: 'blur' },
                    { min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }
                ],
                new_password: [
                    { required: true, message: '请输入您的新密码', trigger: 'blur' },
                    { min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }
                ],
                repeat_new_password :[
                    { required: true, message: '请重复输入您的新密码', trigger: 'blur' },
                    { min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        reset_password:function(reset_info){
            this.$refs[reset_info].validate(async (valid) => {
                if (valid) {
                    // 验证密码
                    if(this.reset_info.old_password === this.reset_info.new_password){
                        this.$message.error('旧密码和新密码不能一致！');
                        return;
                    }
                    if(this.reset_info.new_password !== this.reset_info.repeat_new_password){
                        this.$message.error('两次输入的新密码不一样，请检查后重新输入！');
                        return;
                    }
                    // 发请求
                    let post_data = {
                        old_password:this.reset_info.old_password,
                        new_password:this.reset_info.new_password,
                        uid:this.$store.state.login.uid
                    }
                    //console.log(post_data);
                    const headerConfig = { headers:
                      { 'Content-Type': 'application/json' ,'x-auth-token': this.$store.state.login.token}
                    };
                    try{
                      const res = await axios.post('/api/my/reset_password',post_data,headerConfig);
                      if(res.status!==200) return this.$message.error("请求失败，请检查网络设置！");
                      if(res.data.res.ok === 1){
                            this.$notify({
                                title: '成功',
                                message: res.data.res.msg,
                                type: 'success'
                            });
                        }else{
                            this.$notify({
                                title: '提示',
                                message: res.data.res.msg,
                                type: 'error'
                            });
                        }
                    }catch(e){
                        console.log(e);
                        this.$message.error("出错了！这不是您的问题，我们的工程师正在努力修复！");
                    }
                } else {
                    this.$message.error('抱歉出错了！请根据红色文字提示修改信息后再进行提交');
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    background-color: #fff;
    #title{
        font-size: 20px;
        font-weight: bold;
    }
}
/deep/ .el-input__inner{
    width:30%;
}
</style>